<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ShopZon美妆商城</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.ico">
    <!-- Place favicon.ico in the root directory -->


    <!-- all css here -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/elegant-font.css">
    <link rel="stylesheet" href="static/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="static/css/meanmenu.min.css">
    <link rel="stylesheet" href="static/css/magnific-popup.css">
    <link rel="stylesheet" href="static/css/animate.css">
    <link rel="stylesheet" href="static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="static/css/animate-heading.css">
    <link rel="stylesheet" href="static/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="static/css/jquery-ui.css">
    <link rel="stylesheet" href="static/css/shortcode/shortcodes.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/responsive.css">
    <script src="static/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body class="other-page">


<!-- Header Area Start -->
<header>
    <!-- Header Menu Area -->
    <div class="menu-area mt-60">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <div class="logo-area text-center text-uppercase res-logo-sm">
                        <a href="index.html"><img src="img/icon/logo.png" alt=""/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header Menu Area -->

    <!-- Banner Area Start -->
    <div class="banner-area pb-90 pt-160 bg-2">
        <div class="container">
            <div class="row">
                <div class="banner-content text-center text-white">
                    <h1>结账</h1>
                    <ul>
                        <li><a href="${HOMEURL}">主页</a> <span class="arrow_carrot-right "></span></li>
                        <li>结账</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Area End -->
</header>
<!-- Header Area End -->
<!-- Page Content Wraper Area Start -->
<section class="page-content-wrapper pt-100 pb-40">
    <!-- coupon-area start -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="coupon-accordion">
                    <!-- ACCORDION START -->
                    <div id="checkout-login" class="coupon-content">
                        <div class="coupon-info">

                        </div>
                    </div>
                    <!-- ACCORDION END -->
                    <!-- ACCORDION START -->
                    <div id="checkout_coupon" class="coupon-checkout-content">

                    </div>
                    <!-- ACCORDION END -->
                </div>
            </div>
        </div>
    </div>
    <!-- coupon-area end -->

    <!-- checkout-area start -->
    <div class="checkout-area">
        <div class="container">
            <div class="row">
                <form action="#">
                    <div class="col-lg-6 col-md-6">
                        <div class="checkbox-form">
                            <h3>订单详情</h3>
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="checkout-form-list">
                                        <label>姓名 <span class="required">*</span></label>
                                        <input id="name" value="${shopUser.name}" type="text"/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="country-select">
                                        <label>性别 <span class="required">*</span></label>
                                        <select id="sex" name="sex">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="checkout-form-list">
                                        <label>地址 <span class="required">*</span></label>
                                        <select id="addr">
                                            <%for(addr in addrList){%>
                                            <option value="${addr.province}${addr.city}${addr.area}${addr.detail}">
                                                ${addr.province}${addr.city}${addr.area}${addr.detail}
                                            </option>
                                            <%}%>
                                        </select>
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="checkout-form-list">
                                        <label>邮箱地址 <span class="required">*</span></label>
                                        <input id="emaill" value="${shopUser.emaill}" type="email"/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="checkout-form-list">
                                        <label>手机 <span class="required">*</span></label>
                                        <input id="phone" value="${shopUser.phone}" type="text"/>
                                    </div>
                                </div>

                            </div>
                            <div class="different-address">
                                <div class="ship-different-title">

                                </div>
                                <div id="ship-box-info" class="row">
                                    <div class="col-md-12">
                                        <div class="country-select">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">

                                        </div>
                                    </div>
                                </div>
                                <div class="order-notes">
                                    <div class="checkout-form-list">
                                        <label>订单备注</label>
                                        <textarea id="remark" cols="30" rows="10" name="remark"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="your-order">

                            <div class="your-order-table table-responsive">
                                <table>
                                    <thead>
                                    <tr>
                                        <th class="product-name">产品</th>
                                        <th class="product-total">数量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <input id="asd" type="hidden" value=""/>
                                    <input id="zxc" type="hidden" value=""/>
                                    <input id="qwe" type="hidden" value=""/>
                                    <input id="xxd" type="hidden" value=""/>
                                    <%for(item in items){%>
                                    <input id="${item.id}" type="hidden" value="${item.id}"/>
                                    <input id="${item.id}_${item.num}" type="hidden" value="${item.num}"/>
                                    <input id="${item.id}_${item.num}_${item.title}" type="hidden"
                                           value="${item.title}"/>
                                    <input id="${item.id}_${item.num}_${item.title}_${item.price}" type="hidden"
                                           value="${item.price}"/>
                                    <tr class="cart_item">
                                        <td class="product-name">
                                            ${item.title} <strong class="product-quantity"> X ${item.num}</strong>
                                        </td>
                                        <td class="product-total">
                                            <span class="amount">￥${item.price}</span>
                                        </td>
                                    </tr>
                                    <script>
                                        var id = document.getElementById('${item.id}').value;
                                        document.getElementById('asd').value = id;

                                        var num = document.getElementById('${item.id}_${item.num}').value;
                                        document.getElementById('zxc').value = num;

                                        var title = document.getElementById('${item.id}_${item.num}_${item.title}').value;
                                        document.getElementById('qwe').value = title;

                                        var title = document.getElementById('${item.id}_${item.num}_${item.title}_${item.price}').value;
                                        document.getElementById('xxd').value = title;
                                    </script>
                                    <%}%>

                                    </tbody>
                                    <tfoot>
                                    <tr class="order-total">
                                        <th>Order Total</th>
                                        <td><strong><span class="amount">￥${total}</span></strong>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="payment-method">
                                <div class="payment-accordion">

                                    <div class="order-button-payment">
                                        <input type="button" onclick="sub()" value="提交订单"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- checkout-area end -->
</section>
<!-- Page Content Wraper Area End -->
<!-- Fotter Area Start -->
<footer>
    <!-- Footer Top Area End -->
    <div class="fotter-area dark-gray-bg ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-xs-12">
                    <div class="address-area res-mb-sm-30">
                        <a href="index.html">shopzon</a>
                        <p>Lorem ipsum dolor sit amet, consemi cteta dipisi cing elit, sed do eiusmod tempor.</p>
                        <div class="contact-social mt-40">
                            <ul>
                                <li>
                                    <a href="#" class="social_facebook "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_twitter "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_googleplus"></a>
                                </li>
                                <li>
                                    <a href="#" class="social_linkedin "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_instagram "></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-12 xs-res-mrbtm">
                    <div class="footer-menu res-mb-sm-30">
                        <h4>MY ACCOUNT</h4>
                        <ul>
                            <li><a href="#">FAQs</a></li>
                            <li><a href="#">Payments</a></li>
                            <li><a href="#">Track Your Order</a></li>
                            <li><a href="#">Return Polcy</a></li>
                            <li><a href="#">Warranty</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 hidden-sm hidden-xs">
                    <div class="footer-menu">
                        <h4>SHOP GUIDE</h4>
                        <ul>
                            <li><a href="#">Hot Sale</a></li>
                            <li><a href="#">Best Sellar</a></li>
                            <li><a href="#">Suppliers</a></li>
                            <li><a href="#">Our Store</a></li>
                            <li><a href="#">Deal of The Day</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-12 xs-res-mrbtm">
                    <div class="footer-menu">
                        <h4>CONTACT INFO</h4>
                        <div class="contact-details">
                            <ul>
                                <li>
                                    <span class="icon_pin"></span>
                                    <p>Lusmod tempor incididunt</p>
                                </li>
                                <li>
                                    <span class="icon_mail"></span>
                                    <p>Lusmod incidiunt wesbvu</p>
                                </li>
                                <li>
                                    <span class="icon_phone "></span>
                                    <p>(256) 987 654 321</p>
                                </li>
                                <li>
                                    <span class="icon_clock_alt"></span>
                                    <p>8.00 am-6.00 pm</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Top Area End -->
    <!-- Footer Bottom Area Start -->
    <div class="footer-bottom-area black-bg">
        <div class="container">
            <div class="row ">
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <p>Copyright &copy; 2020.Company name All rights reserved.</p>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <img src="img/icon/payment.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Bottom Area End -->
</footer>
<!-- Fotter Area End -->

<!-- all js here -->
<script src="static/js/vendor/jquery-1.12.4.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/isotope.pkgd.min.js"></script>
<script src="static/js/jquery.nivo.slider.js"></script>
<script src="static/js/jquery.simpleLens.min.js"></script>
<script src="static/js/jquery.magnific-popup.min.js"></script>
<script src="static/js/animated-heading.js"></script>
<script src="static/js/price-slider.js"></script>
<script src="static/js/jquery.ajaxchimp.min.js"></script>
<script src="static/js/jquery.countdown.js"></script>
<script src="static/js/jquery.meanmenu.js"></script>
<script src="static/js/plugins.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>

<script>

    $("#sex").val('${shopUser.sex}');

    function sub() {
        // 先生成订单， 再结算
        let name = $("#name").val();
        let sex = $("#sex").val();
        let emaill = $("#emaill").val();
        let address = $("#addr").val();
        let remark = $("#remark").val();
        let phone = $("#phone").val();
        let itemTotal;
        let itemNum;
        let FLAG;
        let itemId;
        let title;
        let price;
        if ('${items.~size}' == '1' && '${FLAG}' == 'FLAG') {
            itemId = $("#asd").val();
            itemNum = $("#zxc").val();
            title = $("#qwe").val();
            price = $("#xxd").val();
        }

        $.ajax({
            url: '${url}' + '/order/make',
            type: 'post',
            dataType: "json",
            data: {
                itemId: itemId
                , title: title
                , price: price
                , itemNum: itemNum
                , phone: phone
                , name: name
                , sex: sex
                , emaill: emaill
                , address: address
                , remark: remark
                , itemTotal: '${total}'
                , FLAG: '${FLAG}'

            },
            success: function (result) {
                if (result.code == 200) {
                    if ('${items.~size}' == '1' && '${FLAG}' == 'FLAG') {
                        window.location.href = "${url}/getPagePay?id=" + result.msg + "&items_total=" + '${total}' + '&FLAG=' + '${FLAG}';
                    } else {
                        window.location.href = "${url}/getPagePay?id=" + result.msg + "&items_total=" + '${total}';
                    }
                } else {
                    alert(result.msg)
                }
            }
        });

    }

</script>

